<template>
  <a-form
    :model="formState"
    ref="formDataRef"
    name="basic"
    :label-col="{ style: 'width:90px' }"
    :wrapper-col="{ style: 'calc(100% - 90px)' }"
    autocomplete="off"
    @finish="onFinish"
    @finishFailed="onFinishFailed"
  >
    <a-form-item label="运单号" name="waybillNum">
      {{ passData.waybillNum }}
    </a-form-item>
    <a-form-item label="件数" name="itemNumber" :rules="[{ required: true, message: '请填写件数!' }]">
      <a-input-number v-model:value="formState.itemNumber" :min="0" :max="9999" :precision="0" placeholder="请输入"></a-input-number>
    </a-form-item>
    <a-form-item label="国家或地区" name="countryRegionId" :rules="[{ required: true, message: '请选择国家或地区!' }]">
      <a-select v-model:value="formState.countryRegionId" placeholder="请选择" @change="changeCountryHandle">
        <a-select-option v-for="(item, index) in countryOpts" :key="index" :value="item.id">{{ item.region }}</a-select-option>
      </a-select>
    </a-form-item>
    <a-form-item label="仓库代码" name="warehouseCode" :rules="[{ required: true, message: '请选择仓库代码!' }]">
      <a-cascader
        v-model:value="formState.warehouseCode"
        :fieldNames="{ label: 'warehouseCode', value: 'warehouseCode', children: 'bizWarehouseCodeManageList' }"
        showSearch
        :options="warehouseCodeOpts"
        placeholder="请选择"
        @change="changeWarehouseCodeHandle"
      />
    </a-form-item>
    <a-form-item label="渠道" name="channelId" :rules="[{ required: true, message: '请选择渠道!' }]">
      <a-cascader v-model:value="formState.channelId" showSearch :options="channelOpts" placeholder="请选择" />
    </a-form-item>
    <a-form-item label="备注" name="remark" :rules="[{ required: false, message: '请填写备注!' }]">
      <a-textarea show-count v-model:value="formState.remark" placeholder="请输入" :maxlength="200" allowClear></a-textarea>
    </a-form-item>
    <a-form-item label="品名" name="productName" :rules="[{ required: false, message: '请填写品名!' }]">
      <a-input v-model:value="formState.productName" placeholder="请输入" :maxlength="50" allowClear></a-input>
    </a-form-item>
    <a-form-item label="材质" name="materialQualityId" :rules="[{ required: false, message: '请选择材质!' }]">
      <a-checkbox-group v-model:value="formState.materialQualityId" name="checkboxgroup">
        <a-checkbox v-for="(item, index) in materialOpts" :key="index" :value="item.id">{{ item.material }}</a-checkbox>
      </a-checkbox-group>
    </a-form-item>
    <a-form-item label="购买保险" name="purchaseInsurance">
      <a-checkbox v-model:checked="formState.purchaseInsurance">购买保险</a-checkbox>
    </a-form-item>
    <a-form-item :wrapper-col="{ offset: 8, span: 16 }" class="submit-btn-form-item">
      <a-button :loading="loading" type="primary" html-type="submit">确定</a-button>
      <a-button @click="resetHandle">取消</a-button>
    </a-form-item>
  </a-form>
</template>

<script lang="ts" setup>
import { toRefs, watch } from "vue";
import InitHook from "./composables/initHook";
import OperationHook from "./composables/operationHook";
const props = withDefaults(
  defineProps<{
    visible: boolean;
    passData: ClientAdvanceManagement.CilentInfo;
    type: number;
  }>(),
  {}
);
const emit = defineEmits<{
  (e: "update:visible", blo: boolean): void;
  (e: "submit"): void;
}>();
const { visible, passData, type } = toRefs(props);
const { dataDict, formDataRef, formState, loading, getAllCountryOpts, countryOpts, channelOpts, getChannelOpts, getAllMaterialOpts, materialOpts, warehouseCodeOpts, getAllWarehouseCodeOpts } =
  InitHook();
const { onFinish, onFinishFailed, resetFields, resetHandle, changeCountryHandle, changeWarehouseCodeHandle } = OperationHook({
  formDataRef,
  formState,
  passData,
  emit,
  type,
  loading,
  materialOpts,
  getChannelOpts,
  getAllWarehouseCodeOpts
});
const init = () => {
  if (type.value === 2) {
    console.log(passData.value);
    Object.assign(formState, passData.value);
    formState.channelId = [formState.channelAllocation, formState.channelId];
    const { name } = dataDict.value["WAYBILL_TYPE"].find((t: Base.GeneraDataType) => t.code === passData.value.addressType) || {};
    formState.warehouseCode = [name, passData.value.warehouseCode];
    if (formState.materialQualityId) {
      formState.materialQualityId = formState.materialQualityId.split(",");
    }
    formState.purchaseInsurance = formState.purchaseInsurance === 1 ? true : false;
  }
  getAllWarehouseCodeOpts();
  getChannelOpts();
  getAllCountryOpts();
  getAllMaterialOpts();
};
watch(
  () => visible.value,
  (v: boolean) => {
    if (v) {
      init();
    } else {
      resetFields();
      formDataRef.value.clearValidate();
    }
  }
);
init();
</script>
<style lang="stylus" scoped>
:deep(.ant-input-number){
    width: 100%;
}
</style>
